<template>
  <div class="g2-person-center-right-article">
    <div class="g2-list is-vertical is-large is-split">
      <div class="list-item">
        <div class="g2-list-item-meta">
          <div class="list-item-meta-content">
            <h4 class="list-item-meta-title">Alipay</h4>
            <div class="list-item-meta-description">
              <span>
                <el-tag size="mini">Ant design</el-tag>
                <el-tag size="mini">Ant design</el-tag>
              </span>
            </div>
          </div>
        </div>
        <div class="list-item-content">
          <div class="list-item-content-wrapper">
            <div
              class="list-item-content-description"
            >段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。</div>
            <div class="list-item-content-extra">
              <span class="g2-avatar is-small is-circle has-image">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" alt>
              </span>
              <a>各种</a>
              发表在
              <a>http://www.baidu.com</a>
              <em>2018-11-11 11:11:11</em>
            </div>
          </div>
        </div>
        <ul class="list-item-action">
          <li>
            <span>193</span>
            <em class="g2-list-item-action-split"></em>
          </li>
          <li>
            <span>193</span>
            <em class="g2-list-item-action-split"></em>
          </li>
          <li>
            <span>193</span>
            <em class="g2-list-item-action-split"></em>
          </li>
        </ul>
      </div>
      <div class="list-item">
        <div class="g2-list-item-meta">
          <div class="list-item-meta-content">
            <h4 class="list-item-meta-title">Alipay</h4>
            <div class="list-item-meta-description">
              <span>
                <el-tag size="mini">Ant design</el-tag>
                <el-tag size="mini">Ant design</el-tag>
              </span>
            </div>
          </div>
        </div>
        <div class="list-item-content">
          <div class="list-item-content-wrapper">
            <div
              class="list-item-content-description"
            >段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。</div>
            <div class="list-item-content-extra">
              <span class="g2-avatar is-small is-circle has-image">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" alt>
              </span>
              <a>各种</a>
              发表在
              <a>http://www.baidu.com</a>
              <em>2018-11-11 11:11:11</em>
            </div>
          </div>
        </div>
        <ul class="list-item-action">
          <li>
            <span>193</span>
            <em class="g2-list-item-action-split"></em>
          </li>
          <li>
            <span>193</span>
            <em class="g2-list-item-action-split"></em>
          </li>
          <li>
            <span>193</span>
            <em class="g2-list-item-action-split"></em>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonCenterRightArticle",
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
@import "~@scss/components/_meta.scss";

.g2-person-center-right-article {
  .list-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
  }

  .g2-list-item-meta,
  .list-item-content {
    margin-bottom: 20px;
  }

  .list-item-content .list-item-content-description {
    line-height: 22px;
    max-width: 720px;
  }
  .list-item-content .list-item-content-extra {
    color: rgba(0, 0, 0, 0.45);
    margin-top: 16px;
    line-height: 22px;
  }
}
</style>
